<template>
  <view class="wrap">
    <oto-waterfall :value="flowList" @input="changeFollwList" ref="otoWaterfall">
      <template v-slot:left-mock>
        <template v-if="isFlowListNone">
          <template v-for="(item, index) in mockList">
            <oto-waterfall-loading
              :key="index"
              :customStyle="{
                marginLeft: '20rpx',
                marginBottom: '36rpx'
              }"
              :useRandomHeight="true"
            />
          </template>
        </template>
      </template>
      <template v-slot:left="{ leftList }">
        <view
          :key="index"
          :style="{
            marginTop: index === 0 ? '0' : '36rpx'
          }"
          v-for="(item, index) in leftList"
        >
          <oto-water-flow-card
            :custom-style="{
              marginLeft: '20rpx'
            }"
            :data="item"
            :index="index"
            @loaded="loaded"
            :data-item="item.images"
          />
        </view>
      </template>
      <template v-slot:right-mock>
        <template v-if="isFlowListNone">
          <template v-for="(item, index) in mockList">
            <oto-waterfall-loading
              :key="index"
              :customStyle="{
                marginLeft: '8rpx',
                marginBottom: '36rpx'
              }"
              :useRandomHeight="true"
              :data-item="item.images"
            />
          </template>
        </template>
      </template>
      <template v-slot:right="{ rightList }">
        <view
          v-for="(item, index) in rightList"
          :key="index"
          :style="{
            marginTop: index === 0 ? '0' : '36rpx'
          }"
        >
          <oto-water-flow-card
            :custom-style="{
              marginLeft: '8rpx'
            }"
            :data="item"
            :index="index"
            @loaded="loaded"
            :data-item="item.images"
          />
        </view>
      </template>
    </oto-waterfall>
    <view class="loading">
      <u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="loadMore"></u-loadmore>
    </view>
  </view>
</template>

<script>
  import OtoWaterFlowCard from './oto-water-flow-card.vue';
  import { LOAD_STATUS } from './constant';
  import OtoWaterfall from './oto-waterfall.vue';
  import OtoWaterfallLoading from './oto-waterfall-loading.vue';

  export default {
    components: {
      OtoWaterFlowCard,
      OtoWaterfall,
      OtoWaterfallLoading
    },
    props: {
      flowList: {
        type: Array,
        default() {
          return [];
        }
      },
      loadStatus: {
        type: String,
        default: LOAD_STATUS.LOAD_MORE
      }
    },
    data() {
      return {
        mockList: [1, 2, 3, 4, 5, 6],
        viewLoading: true,
        viewLoadingId: null,
        first: true
      };
    },
    computed: {
      isNoMore() {
        return this.loadStatus === LOAD_STATUS.NO_MORE;
      },
      isFlowListNone() {
        if (this.flowList.length === 0 && this.loadStatus === LOAD_STATUS.LOADING) {
          this.clear();
          return true;
        }
        return false;
      },
      getViewLoading() {
        return this.isFlowListNone;
      }
    },
    watch: {
      loadStatus: {
        handler(newValue, oldValue) {
          if (newValue === 'loading') {
            this.viewLoading = true;
          }
          if (oldValue === 'loading') {
            this.viewLoading = true;
          }
        }
      }
    },
    created() {},
    mounted() {
      this.first = false;
    },
    methods: {
      loaded() {
        if (!this.viewLoading) return;
        this.viewLoading = false;
      },
      changeFollwList(value) {
        this.$emit('input', value);
      },
      remove(id) {
        this.$refs.otoWaterfall.remove(id);
      },
      clear() {
        this.$refs.otoWaterfall && this.$refs.otoWaterfall.clear && this.$refs.otoWaterfall.clear();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .wrap {
    padding-top: 20rpx;

    .loading {
      padding-top: 20rpx;
    }

    .list-loading {
      width: 346rpx;
      height: 480rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #c0c0c0;
      border-radius: 12rpx;
      background-color: #ebebeb;
    }
  }
</style>
